import {Meta} from '@storybook/addon-docs';

<Meta title="Branding/Overview"/>

# Branding

Customization in UIKit as simple as providing values for CSS-variables. All variables are prefixed with `--g-*` and
located on the root class `.g-root` which is assigned to the `body` by default (can be configured via `scoped` prop in `<ThemeProvider/>`).
UIKit comes with 4 themes, `light`, `dark` and high-contrast counterparts, `light-hc` and `dark-hc`. Color variables are located
on the corresponding theme class `.g-root_theme_{themeName}` along with the root class. If you are going to use more than one theme
you should provide values for each theme individually.

## Basic customization

#### Typography
There are 2 font families, `sans-serif` and `monospace`, which can be configured via `--g-font-family-sans`
and `--g-font-family-monospace`. Also, there are a lot of different text variants: `body-1` `body-2` `caption-1`
`caption-2` `header-1` `header-2` and others. Full list of variants you can find [here](?path=/story/typography--default).
Each of these variants has a specific `font-size` and `line-height` properties which can be configured via variables
`--g-text-{variantName}-font-size` and `--g-text-{variantName}-line-height`. Root node uses `body-1` variant. A `font-weight` property can be set
for each of the variant group (`body` `header` `subheader` `display` `caption` `code`) via `--g-text-{variantGroupName}-font-weight` variable.
There is one specific variable, `--g-text-accent-font-weight`, which can be used separately from text variant.


#### Accent
To give a unique look for components you can provide several variables that controls accent color. Here is the
list of such variables:
* `--g-color-base-brand` - Color for background (action button, active controls)
* `--g-color-base-brand-hover` - Hover color for background
* `--g-color-line-brand` - Color for lines (active tab underline)
* `--g-color-text-brand` - Text color
* `--g-color-text-brand-heavy` - Text color over background
* `--g-color-text-brand-contrast` - Text color over brand background
* `--g-color-base-selection` - Lighter version for background (List selection, Table row selection)
* `--g-color-base-selection-hover` - Hover lighter version for background
* `--g-color-text-link` - Color for links
* `--g-color-text-link-hover` - Hover color for links
* `--g-color-text-link-visited` - Color for visited links
* `--g-color-text-link-visited-hover` - Hover color for visited links

#### Shape
Controls share border radius sizes that can be configured via `--g-border-radius-{size}`, where size is one of xs, s, m, l or xl

### Example

```css

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);
}
```

## Additional customization

You can create your own theme by defining it from scratch or using one of defaults as a basis. For example:

```scss
@use '@gravity-ui/uikit/styles/themes';

// Default theme as a basis
.g-root_theme_custom {
    @include themes.g-theme-light;

    // List of overrides
}
```
